<template>
  <div class="dashboard-editor-container">
    <level-chart ref="levelChart" />
    <el-row :gutter="10">
      <el-col :lg="20" :sm="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>快捷导航</span>
          </div>
          <el-row :gutter="27" style="margin-bottom: 14px">
            <el-col v-for="(item,i) in routes" :key="i" :span="12" :lg="3" class="text-center">
              <router-link class="pan-btn light-blue-btn" :to="item.link">
                {{ $t(item.text) }}
              </router-link>
            </el-col>
          </el-row>
        </el-card>
        <!-- 统计 -->
        <panel-group :count-data="countData" @handleSetLineChartData="handleSetLineChartData" />
      </el-col>
      <el-col :lg="4" :sm="24">
        <el-card class="box-card say-hello">
          <div style="padding: 7px;">
            <span>{{ hello.text }}</span>
          </div>
          <img :src="require('../../../assets/imgs/'+hello.img+'.png')" style="width: 100%" alt="图片加载失败了">
          <div class="now-new-data">
            <div class="text-left" style="padding: 11px;">
              今天新增了
            </div>
            <div style="padding-left: 11px;">
              <div v-for="(item,i) in nowData" :key="i" style="padding: 2px;">
                {{ item.name }}
                <el-tag size="mini">
                  <count-to :start-val="0" :end-val="item.value" :duration="2000" />
                </el-tag>
                {{ item.unit }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <!--下面三张图形-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>服务器健康状态</span>
      </div>
      <div style="margin-bottom:50px;">
        <VerticalTable :table-data="systemInfo" />
      </div>
    </el-card>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import LevelChart from './components/LevelChart'
import { transactionList, systemInfoData, nowDayNewData } from '@/api/remote-search'
import VerticalTable from '@/components/VerticalTable'
import { sayHello } from '@/utils'
import CountTo from 'vue-count-to'
import { getSales } from '@/api/visualFilter'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    VerticalTable,
    CountTo,
    LevelChart
  },
  data() {
    return {
      nowDate: new Date(),
      systemInfo: [],
      charts_data: [],
      lineChartData: [],
      countData: [],
      hello: '',
      nowData: []
    }
  },
  computed: {
    routes() {
      return [
        {
          text: '商品分析',
          link: '/brands/shops'
        }, {
          text: '可视化分析',
          link: '/brands/visual'
        },
        {
          text: '销售数据',
          link: '/sales/index'
        }, {
          text: '抖音专区',
          link: '/dy/index'
        }
      ]
    }
  },
  mounted() {
    this.hello = sayHello()
    transactionList().then(res => {
      this.charts_data = res.data.charts_data
      this.lineChartData = this.charts_data[Object.keys(this.charts_data)[0]]
      this.countData = res.data.count
    })
    systemInfoData().then(res => {
      console.log(res.data)
      this.systemInfo = res.data
    })
    this.loadNowData()
    this.initWaterLevelChart()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = this.charts_data[type]
    },
    loadNowData() {
      nowDayNewData().then((ret) => {
        this.nowData = ret.data
      })
    },
    initWaterLevelChart() {
      getSales({
        platforms: [],
        brands: [],
        filters: []
      }).then(res => {
        const cpData = []
        res.data.roseData.forEach(item => {
          cpData.push({
            name: item.day,
            value: item.value
          })
        })
        res.data.roseData = cpData
        this.$refs.levelChart.visualData = res.data.roseData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.say-hello {
  font-size: 13px;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
